<!--
 * @Date: 2024-11-21 15:38:20
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-21 15:00:54
 * @Description: 主页设计主页面
-->
<template>
  <div class="hp-design-full">
    <div class="hp-design-body">
      <div class="hp-design-main">
        <HpLeftSiderbar></HpLeftSiderbar>
        <HpEditCenter></HpEditCenter>
        <HpRightSiderbar></HpRightSiderbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, provide, reactive, toRaw } from 'vue';
import HpEditCenter from './modules/center/index.vue'
import HpLeftSiderbar from './modules/leftSiderbar/index.vue'
import HpRightSiderbar from './modules/rightSiderbar/index.vue'

import { deepClone, getUUID } from '@hp/utils/data.js'
import { pluginManager } from '@hp/utils/pluginManager';

const props = defineProps({
  layouts: { type: Array, default: () => ([]) }
})

// 设计模块的数据集
const state = reactive({
  // 布局数据
  layouts: [],
  // 鼠标滑过的节点
  hoverNode: null,
  // 点击选中的节点
  checkedNode: null,
  // 右侧收缩
  rightSideCollapse: false,
})
// 布局的属性配置
const layoutAttrs = reactive({
  colNum: 120,
  rowHeight: 1,
  isDraggable: true,
  isResizable: true,
  verticalCompact: true,
  useCssTransforms: true,
})
/**
 * 新增面板模块
 * 
 * @param item 
 */
const addLayoutItem = (item) => {
  const panelItem = deepClone(item)
  const { type, layout, schema, name} = panelItem
  const { colNum } = layoutAttrs
  const l = state.layouts.length ?? 0
  const i = getUUID()
  const x = layout.w * l % (colNum ?? 12)
  const y = l + (colNum || 12)
  const gridItem = {
    ...layout, i, x, y, type, name,
    schema: { ...schema, id: i, label: name },
  }
  setCheckedNode(gridItem)
  state.layouts.push(gridItem)
  scrollBottom(i)
}
/**
 * 滚动到底部
 */
const scrollBottom = (id) => {
  nextTick(() => {
    if (!id) return
    setTimeout(() => {
      const element = document.getElementById(id);
      element.scrollIntoView({ 
        behavior: 'smooth', // 平滑滚动
        block: 'start'      // 对齐到视口顶部 (start/center/end)
      });
    }, 200)
  })
}
/**
 * 移除面板模块
 * 
 * @param id 面板模块ID
 */
const removeLayoutItem = (id) => {
  const index = state.layouts.findIndex(item => item.i === id)
  if (index > -1) {
    if (state.checkedNode && state.checkedNode.i === id) { setCheckedNode({}) }
    state.layouts.splice(index, 1)
    pluginManager.removePanelRef(id)
  }
  // if (state.layouts.length === 0) {
  //   state.rightSideCollapse = true
  // }
}
/**
 * 设置选中的节点
 * 
 * @param item 选择的节点
 */
const setCheckedNode = (item) => {
  state.checkedNode = item
  state.rightSideCollapse = false
}
/**
 * 获取布局数据
 */
const getDesignData = () => {
  const result = toRaw(state.layouts).map(item => {
    delete item.component
    return item
  })
  return JSON.parse(JSON.stringify(result))
}


onMounted(() => {
  // 设置值
  nextTick(() => { setTimeout(() => { state.layouts = props.layouts }, 200) })
})


provide('layoutAttrs', layoutAttrs)
provide('hpDesigner', {
  state,
  addLayoutItem,
  removeLayoutItem,
  setCheckedNode,
  getDesignData,
})

defineExpose({
  getDesignData
})
</script>

<style lang="scss">
@use '@hp/design/styles/designer.scss' as *;
</style>